<template>
  <div>
    <div style="display: flex;align-items: center;justify-content: center;margin-top: 20px">
      <div style="width: 80%">
        <el-card v-if="hotelData">
          <div style="font-size: 25px;font-weight: bold;margin-left: 80px">{{ hotelData.name }}</div>
          <div style="margin-top: 10px;margin-left: 80px"><i
              class="el-icon-location-information"></i>{{ hotelData.location }}
          </div>
          <div style="display: flex">
            <div style="flex: 1">
              <div style="display: flex">
                <div style="margin-left: 80px">
                  <div style="display: flex;align-items: center;">
                    <div style="display: flex">
                      <img :src="`http://localhost:8000/hotel_image_download/${this.hotel_id}/`" alt=""
                           style="width: 500px;height: 300px">
                    </div>
                  </div>
                </div>
                <div style="flex: 1">
                  <div style="display: flex;align-items: center;justify-content: center">
                    <div style="margin-left: 50px">
                      <div style="margin-bottom: 10px;font-weight: bold;font-size: 24px;">
                        <span style="font-size: 24px;color: #007BFF">{{ hotelData.level }}</span>星级
                      </div>
                      <div style="margin-top: 20px;font-weight: bold;">简介</div>
                      <div
                          style="display: flex;justify-content: center;align-items: center ;background-color: #d4eeff;width: 300px;height: 100px;border-radius: 10px;margin-top: 10px">
                        <div style="margin: 20px">
                          {{ hotelData.intro }}
                        </div>
                      </div>
                      <div style="margin-top: 20px;font-weight: bold;">价格</div>
                      <div style="display: flex">
                        <span style="font-size: 24px;color: #007BFF">￥{{ hotelData.price }}</span>
                        <div style="margin: 10px;font-weight: bold;">起</div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </el-card>
      </div>
    </div>
    <div style="display: flex;align-items: center;justify-content: center;">
      <el-tabs type="border-card" style="width: 80%;margin-top: 20px;margin-bottom: 20px">
        <el-tab-pane label="房间">
          <div style="margin-bottom: 10px;margin-left:5px;font-size: 20px;font-weight: bold;">房间</div>
          <div style="margin-bottom: 20px">
          </div>
          <el-table ref="userTable" :data="RoomData" stripe
                    :header-cell-style="{backgroundColor:'aliceblue',color:'#666'}">
            <el-table-column prop="room_id" label="房间ID"></el-table-column>
            <el-table-column prop="room_type" label="房间类型"></el-table-column>
            <el-table-column prop="price" label="价格"></el-table-column>
            <el-table-column prop="amount" label="总数"></el-table-column>
            <el-table-column prop="status" label="审核状态"></el-table-column>
            <el-table-column label="操作" width="200%" align="center">
              <template v-slot="scope">
                <el-button size="mini" type="warning" plain @click="Apply(scope.row.room_id)">通过</el-button>
                <el-button size="mini" type="danger" plain @click="fail(scope.row.room_id)">不通过</el-button>
              </template>
            </el-table-column>
          </el-table>
          <div style="margin: 10px 0">
            <el-pagination
                @current-change="handleCurrentChange"
                :current-page="pageNum"
                :page-sizes="[100, 200, 300, 400]"
                :page-size="pageSize"
                layout="total,  prev, pager, next"
                :total="total">
            </el-pagination>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>
<script>
import user from "@/views/user.vue";

export default {
  name: "hotelDetail",
  data() {
    return {
      restaurantsCity: [],
      restaurants: [],
      hotelData: [],//酒店、房间和评论
      RoomData: [],
      CommentData: [],
      value: 3.7,
      hotel_id: "",
      pageNum: 1,
      pageSize: 5,
      total: 0,
      user: JSON.parse(localStorage.getItem('user') || '{}'),
    }
  },
  methods: {
    Apply(room_id) {
      const status = 2
      console.log("选定酒店详情", room_id)
      this.$request.post('/room_add/', {
            "admin_id": this.user.id,
            "room_id": room_id,
            "status": status,
          }
      ).then(res => {
        if (res.code === '200') {
          this.$message.success("审核通过")
          // 刷新页面
          // 延迟一秒后调用加载表数据的函数
          setTimeout(() => {
            window.location.reload();
          }, 1000);
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    fail(room_id) {
      const status = 3
      this.$request.post('/room_add/', {
            "admin_id": this.user.id,
            "room_id": room_id,
            "status": status,
          }
      ).then(res => {
        if (res.code === '200') {
          this.$message.error("审核不通过")
          // 刷新页面
          // 延迟一秒后调用加载表数据的函数
          setTimeout(() => {
            window.location.reload();
          }, 1000);
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    loadH_R_C() {  //展示房间和评论
      const hotel_id = this.hotel_id
      this.$request.get('/hotel_detail/' + hotel_id + "/").then(res => {
        if (res.code == '200') {
          this.hotelData = res.data.hotel
          this.loadR()
        } else if (res.code === '501') {
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    loadR(pageNum) {  //展示房间
      if (pageNum) this.pageNum = pageNum
      const hotel_id = this.hotel_id
      console.log("展示房间", hotel_id)
      this.$request.post('/room_list/', {
        "hotel_id": hotel_id,
        "room_type": this.room_type,
        "page_size": this.pageSize,
        "page_id": this.pageNum,
      }).then(res => {
        if (res.code === '200') {
          this.RoomData = res.data.room_list
          console.log("房间数据xxx", res.data.room_list)
          this.total = res.data.item_amount
        } else if (res.code === '501') {
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    order(row) {//选定房间预约,传送酒店id和房间id
      console.log("选定房间预约", row)
      this.$router.push({
        path: '/business/offlineDetail',
        query: {
          roomFrom: JSON.stringify(row)
        }
      })
    },
    handleCurrentChange(pageNum) {
      this.loadR(pageNum)
    },
  },
  mounted() {
  },
  created() {
    this.hotel_id = this.$route.query.id || ''
    this.loadH_R_C()
  }
}
</script>
<style scoped>

</style>